
<script setup lang="ts">
    import { reactive } from 'vue'
    import { uploadImageAPI } from '../../../api/my'
    const state = reactive({
        fileList: [],
    })
    const props = defineProps({
        text: {
            type: String
        }
    })
     // 传参给父组件
     const emits = defineEmits(['uploadChange'])
    // 上传文件
    const afterRead = async (file) => {
        file.status = 'uploading'
        file.message = '上传中...'
        let data = new FormData()
        data.append('user', 'test')
        data.append('file', file.file)
        const res = await uploadImageAPI(data)
        file.url = res.imageUrl
        file.status = 'done'
        file.message = '上传成功'        
        state.fileList = [file]
        emits('uploadChange', res.imageUrl)
    }
    // 文件删除前的回调函数
    const deleteFile = () => {
        // 清空文件列表
        state.fileList = []
    }
   
</script>

<template>
    <div>
        <van-uploader 
            v-model="state.fileList"
            :after-read="afterRead"
            :before-delete ="deleteFile"
            :max-count="1"
            accept=".jpg,.png"
        />
        <p>{{ props.text }}</p>
    </div>
</template>

<style scoped>

>>> .van-uploader__upload{
    background: url('@/assets/img/my/auth-real-pic.png') no-repeat;
    background-size: 100%;
    width: 7.6rem;
    height: 5.2rem;
    margin: 0;
  }
  >>> .van-uploader__preview-image, >>> .van-uploader__preview{
    width: 7.6rem;
    height: 5.2rem;
  }
  >>> .van-uploader__upload-icon{
    display: none;
  }
  p{
    text-align: center;
    margin-top: 0.91rem;
  }
</style>